<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI诗歌生成器</title>
    <link rel="stylesheet" href="/static/css/main.css">
    <style>
        /* 添加自定义样式 */
        .disabled-input {
            background-color: #f0f0f0; /* 禁用状态下的背景颜色 */
            color: #888; /* 禁用状态下的文字颜色 */
            border-color: #ccc; /* 禁用状态下的边框颜色 */
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>AI诗歌生成器</h1>
        <form class="input-group" method="POST" action="/submit_data" id="poemForm">
            <select id="Select" class="form-control" name="style">
                <option class="select_button" value=" ">默认</option>
                <option class="select_button" value="Beam_Search">Beam Search</option>
                <option class="select_button" value="Top_k_Sampling">Top-k Sampling</option>
            </select>
            <input type="text" class="form-control" id="headInput" name="head" placeholder="藏头诗(不输入则默认)" oninput="toggleInput('headInput', 'poetryInput')">
            <input type="text" class="form-control" id="poetryInput" name="poetry" placeholder="补全诗句(不输入则默认)" oninput="toggleInput('poetryInput', 'headInput')">
            <button type="button" onclick="generatePoem()">生成诗歌</button>
        </form>
        <div class="loading" id="loadingIndicator" style="display: none;">
            <span>正在生成诗歌...</span>
        </div>
        <div class="poem-output" id="poemOutput"></div>
    </div>

    <script>
        // 生成诗歌主函数
        async function generatePoem() {
            const head = document.getElementById('headInput').value.trim();
            const poetry = document.getElementById('poetryInput').value.trim();
            const select = document.getElementById('Select').value.trim();

            // 显示加载状态
            document.getElementById('loadingIndicator').style.display = 'flex';
            document.getElementById('poemOutput').textContent = '';

            try {
                // 构造请求数据
                const response = await fetch('/submit_data', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ head, poetry, select })
                });

                // 解析响应数据
                const poemLines = await response.json();
                // 格式化诗歌展示
                document.getElementById('poemOutput').textContent = poemLines.join('\n');
            } catch (error) {
                console.error('生成失败:', error);
                document.getElementById('poemOutput').textContent = '诗歌生成失败，请重试';
            } finally {
                // 隐藏加载状态
                document.getElementById('loadingIndicator').style.display = 'none';
            }
        }

        // 切换输入框可输入状态的逻辑
        function toggleInput(currentInputId, otherInputId) {
            const currentInput = document.getElementById(currentInputId);
            const otherInput = document.getElementById(otherInputId);

            // 如果当前输入框有输入内容，则禁用另一个输入框
            if (currentInput.value.trim() !== '') {
                otherInput.disabled = true;
                otherInput.classList.add('disabled-input'); // 添加禁用样式
            } else {
                // 如果当前输入框清空，则启用另一个输入框
                otherInput.disabled = false;
                otherInput.classList.remove('disabled-input'); // 移除禁用样式
            }
        }
    </script>
</body>
</html>